<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鱿鱼游戏 - 追逐竞技</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <!-- 游戏开始界面 -->
        <div id="startScreen" class="screen active">
            <div class="game-title">
                <h1>🦑 鱿鱼游戏</h1>
                <p class="subtitle">追逐竞技挑战</p>
            </div>
            <div class="game-modes">
                <button class="mode-btn" data-mode="redlight">
                    <span class="mode-icon">🚦</span>
                    <span class="mode-name">红灯绿灯停</span>
                    <span class="mode-desc">听到绿灯时前进，红灯时停止</span>
                </button>
                <button class="mode-btn" data-mode="woodman">
                    <span class="mode-icon">🤖</span>
                    <span class="mode-name">一二三木头人</span>
                    <span class="mode-desc">背身时前进，转身时停止</span>
                </button>
            </div>
            <div class="game-instructions">
                <h3>游戏规则</h3>
                <ul>
                    <li>跟随指令移动，违规将被淘汰</li>
                    <li>在规定时间内到达终点获胜</li>
                    <li>反应速度和准确性决定胜负</li>
                </ul>
            </div>
            
            <div class="settings-section">
                <button id="settingsBtn" class="settings-btn">⚙️ 游戏设置</button>
            </div>
        </div>

        <!-- 游戏界面 -->
        <div id="gameScreen" class="screen">
            <div class="game-header">
                <div class="game-info">
                    <span class="timer">⏱️ <span id="timeDisplay">00:00</span></span>
                    <span class="players">👥 <span id="playersDisplay">10</span></span>
                    <span class="round">🎯 第 <span id="roundDisplay">1</span> 轮</span>
                </div>
                <div class="controls">
                    <button id="pauseBtn">⏸️ 暂停</button>
                    <button id="restartBtn">🔄 重新开始</button>
                    <button id="menuBtn">📋 菜单</button>
                </div>
            </div>
            
            <div class="game-area">
                <div class="game-field">
                    <div class="start-line">起点</div>
                    <div class="finish-line">终点</div>
                    <div id="gameCanvas"></div>
                </div>
                <div class="side-panel">
                    <div class="status-display">
                        <h4>游戏状态</h4>
                        <div id="statusText">准备开始...</div>
                        <div id="commandText" class="command-text"></div>
                    </div>
                    <div class="player-list">
                        <h4>玩家列表</h4>
                        <div id="playerList"></div>
                    </div>
                </div>
            </div>

            <div class="mobile-controls">
                <button id="moveBtn" class="control-btn">🏃 移动</button>
                <button id="stopBtn" class="control-btn">🛑 停止</button>
            </div>
        </div>

        <!-- 游戏设置界面 -->
        <div id="settingsScreen" class="screen">
            <div class="settings-container">
                <h2>⚙️ 游戏设置</h2>
                
                <div class="settings-group">
                    <h3>🚦 红灯绿灯停设置</h3>
                    <div class="setting-item">
                        <label for="greenLightMin">绿灯最短时间（秒）</label>
                        <input type="range" id="greenLightMin" min="2" max="8" value="4" step="0.5">
                        <span class="setting-value" id="greenLightMinValue">4</span>
                    </div>
                    <div class="setting-item">
                        <label for="greenLightMax">绿灯最长时间（秒）</label>
                        <input type="range" id="greenLightMax" min="4" max="12" value="7" step="0.5">
                        <span class="setting-value" id="greenLightMaxValue">7</span>
                    </div>
                    <div class="setting-item">
                        <label for="redLightMin">红灯最短时间（秒）</label>
                        <input type="range" id="redLightMin" min="1" max="5" value="2" step="0.5">
                        <span class="setting-value" id="redLightMinValue">2</span>
                    </div>
                    <div class="setting-item">
                        <label for="redLightMax">红灯最长时间（秒）</label>
                        <input type="range" id="redLightMax" min="2" max="6" value="4" step="0.5">
                        <span class="setting-value" id="redLightMaxValue">4</span>
                    </div>
                </div>

                <div class="settings-group">
                    <h3>🤖 一二三木头人设置</h3>
                    <div class="setting-item">
                        <label for="moveTimeMin">前进最短时间（秒）</label>
                        <input type="range" id="moveTimeMin" min="2" max="6" value="3" step="0.5">
                        <span class="setting-value" id="moveTimeMinValue">3</span>
                    </div>
                    <div class="setting-item">
                        <label for="moveTimeMax">前进最长时间（秒）</label>
                        <input type="range" id="moveTimeMax" min="4" max="10" value="6" step="0.5">
                        <span class="setting-value" id="moveTimeMaxValue">6</span>
                    </div>
                    <div class="setting-item">
                        <label for="countdownInterval">报数间隔（秒）</label>
                        <input type="range" id="countdownInterval" min="1" max="4" value="2" step="0.5">
                        <span class="setting-value" id="countdownIntervalValue">2</span>
                    </div>
                    <div class="setting-item">
                        <label for="turnWaitTime">转身等待时间（秒）</label>
                        <input type="range" id="turnWaitTime" min="1" max="4" value="2.5" step="0.5">
                        <span class="setting-value" id="turnWaitTimeValue">2.5</span>
                    </div>
                </div>

                <div class="settings-group">
                    <h3>🎮 游戏难度</h3>
                    <div class="setting-item">
                        <label for="aiSpeed">AI移动速度</label>
                        <select id="aiSpeed">
                            <option value="slow">慢速</option>
                            <option value="normal" selected>正常</option>
                            <option value="fast">快速</option>
                        </select>
                    </div>
                    <div class="setting-item">
                        <label for="aiReaction">AI反应概率</label>
                        <input type="range" id="aiReaction" min="20" max="80" value="50" step="5">
                        <span class="setting-value" id="aiReactionValue">50%</span>
                    </div>
                </div>

                <div class="settings-actions">
                    <button id="resetSettingsBtn">🔄 重置默认</button>
                    <button id="saveSettingsBtn">💾 保存设置</button>
                    <button id="backFromSettingsBtn">🔙 返回菜单</button>
                </div>
            </div>
        </div>

        <!-- 游戏结束界面 -->
        <div id="endScreen" class="screen">
            <div class="result-container">
                <h2 id="resultTitle">游戏结束</h2>
                <div class="result-stats">
                    <div class="stat">
                        <span class="stat-label">最终排名</span>
                        <span class="stat-value" id="finalRank">#1</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">存活时间</span>
                        <span class="stat-value" id="survivalTime">00:00</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">移动次数</span>
                        <span class="stat-value" id="moveCount">0</span>
                    </div>
                </div>
                <div class="result-actions">
                    <button id="playAgainBtn">🔄 再玩一次</button>
                    <button id="backToMenuBtn">📋 返回菜单</button>
                </div>
            </div>
        </div>
    </div>

    <script src="sounds.js"></script>
    <script src="script.js"></script>
</body>
</html>